<template>
  <div :class="sideTheme">
    <page-bg class="page-bg" title="标签"></page-bg>
    <n-grid item-responsive>
      <n-gi span="1 800:1 1200:4" />
      <n-gi span="22 800:22 1200:16">
        <div class="tags">
          <span v-for="(item,index) in list" 
            :key="index" 
            class="text" 
            :style="`color:${fontColor()};font-size:${fontSize()}px;`"
            @click="toDetail(item)"
          >
            {{item}}
          </span>
        </div>
      </n-gi>
      <n-gi span="1 800:0" />
    </n-grid>
  </div>
</template>

<script setup name="Tags">
import { useRouter } from 'vue-router'
import PageBg from "@/components/PageBg/index.vue"
import { getTags } from "@/api/home.js"
import { useSettingsStore } from "@/store"
import { ref, toRefs, onMounted } from 'vue';
const router = useRouter()

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

const list = ref([]);

const fontColor = () =>{
  return (
    'rgb(' +
    Math.round(Math.random() * 255) +
    ', ' +
    Math.round(Math.random() * 255) +
    ', ' +
    Math.round(Math.random() * 255) +
    ')'
  );
}

const fontSize = () => {
  return random(20,30,0);
}
const random = (maxNum, minNum, decimalNum) => {
	var max = 0, min = 0;
	minNum <= maxNum ? (min = minNum, max = maxNum) : (min = maxNum, max = minNum);
	switch (arguments.length) {
		case 1:
			return Math.floor(Math.random() * (max + 1));
			break;
		case 2:
			return Math.floor(Math.random() * (max - min + 1) + min);
			break;
		case 3:
			return (Math.random() * (max - min) + min).toFixed(decimalNum);
			break;
		default:
			return Math.random();
			break;
	}
}

const toDetail = (tagName) => {
  router.push({ 
    name: "TageDetail",
    query: {
      name: tagName
    }
  })
}

onMounted(() => {
  getTags().then(res => {
    list.value = res.list.sort(()=>{
      return Math.random() - 0.5
    });
  })
})
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
#wordCloud {
  width: 100%;
  height: 250px;
}
.page-bg {
  width: 100%;
  height: 400px;
}
.tags {
  box-sizing: border-box;
  margin-top: 20px;
  padding: 40px 35px;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
  .text {
    display: inline-block;
    margin: 0 10px;    
    text-decoration: none;
    overflow-wrap: break-word;
    transition: all 0.2s;
  }
  .text:hover {
    color: #49b1f5 !important;
    transform: scale(1.2);
    cursor:url("../../assets/cur/x2.cur"),default !important;
  }
}

.theme-dark {
  .tags {
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFFB3 !important;  
  }
}
</style>